<template>
  <!-- 一条文章单元格 -->
  <van-cell @click="$router.push(`/article?art_id=${artObj.art_id}`)">
    <!-- 标题区域的插槽 -->
    <template #title>
      <div class="title-box">
        <!-- 标题 -->
        <span>{{ artObj.title }}</span>
        <!-- 单图 -->
        <img
          v-if="artObj.cover.type === 1"
          class="thumb"
          v-lazy="artObj.cover.images[0]"
        />
      </div>
      <!-- 三张图片 -->
      <div class="thumb-box" v-if="artObj.cover.type > 1">
        <img
          v-for="(imgUrl, index) in artObj.cover.images"
          :key="index"
          class="thumb"
          v-lazy="imgUrl"
        />
      </div>
    </template>
    <!-- label 区域的插槽 -->
    <template #label>
      <div class="label-box">
        <div>
          <span>作者 {{ artObj.aut_name }}</span>
          <span>{{ artObj.comm_count }} 评论</span>
          <span>发布日期 {{ $timeAgo(artObj.pubdate) }}</span>
        </div>
        <!-- 反馈按钮 -->
        <van-icon name="cross" @click.stop="show1 = true" v-if="showCross" />
        <!-- 一级反馈面板 -->
        <van-action-sheet
          v-model="show1"
          :actions="FIRST_ACTIONS"
          @select="onSelectFn"
          get-container="body"
          cancel-text="取消"
        />
        <!-- 二级反馈面板 -->
        <van-action-sheet
          v-model="show2"
          :actions="SECOND_ACTIONS"
          @select="onSelectFn"
          get-container="body"
          cancel-text="取消"
        />
      </div>
    </template>
  </van-cell>
</template>

<script>
// 目标：文章 -> 不感兴趣
// 1. 定义接口
// 2.判断点击的是不是不感兴趣选项 -> select中回调参数id或name判断
// 3.调接口
// 4. 两次子传父， ArticleItem -> ArticleList -> Home
// 5. 删除之后，防止漏出空白，做个判断，再拉取一次数据

// 目标：文章 -> 举报
// 1. 定义接口
// 2.判断点击的是不是二级反馈
// 3.调接口 -> 传参数
// 4.关闭一、二级反馈面板
// 5.成功的提示语

// 目标：反馈X的区分
// 1. 在ArticleItem中声明props，控制X的可见性，可以给个默认值与v-if结合
// 2. 用到了两次父传子
// 再提供一个更好的解决方案：在ArticleList中定义插槽
import { dislikeArticleAPI, reportArticleAPI } from '@/api/Home'
import { FIRST_ACTIONS, SECOND_ACTIONS } from '@/constant'
export default {
  name: 'ArticleItem',
  data () {
    return {
      show1: false, // 控制反馈一级面板的可见性
      FIRST_ACTIONS,
      SECOND_ACTIONS,
      show2: false // 控制反馈二级面板的可见性
    }
  },
  props: {
    // 父传子的文章对象
    artObj: {
      type: Object,
      required: true
    },
    // 父传子 -> 控制反馈X的可见性
    showCross: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 反馈面板点击事件
    async onSelectFn ({ id, name }) {
      if (id === 11) {
        // 不感兴趣
        // 1. 调接口 - 让后台删除
        await dislikeArticleAPI({
          articleId: this.artObj.art_id
        })
        // 2.从vue变量中删除 -> 子传父
        this.$emit('dislike')
      } else if (id === 22) {
        // 反馈垃圾内容
        this.show2 = true
      } else {
        // 二级反馈
        // 调接口，给后台传递信息
        await reportArticleAPI({
          target: this.artObj.art_id,
          type: id,
          remark: id === 0 ? '其它问题' : name
        })
        // 关闭一级、二级反馈面板
        this.show1 = this.show2 = false
        // 成功的提示
        this.$notify({ type: 'success', message: '举报成功' })
      }
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
} /* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
